<!-- 积分详情 -->
<template>
  <div class="deposit_details">
    <el-container class="base_details_container">
      <BackTitleView title="积分详情" />
      <el-main>
        <div class="base_details_content">
          <div v-if="isApproval" class="content" style="margin-top: 20px">
            <DataCollectTable :data="data" :total="total" :config="config">
            </DataCollectTable>
          </div>
          <div v-else class="content">
            <div class="base_details_content_second">
              <el-descriptions :column="1" class="base_descriptions_one">
                <el-descriptions-item label="用户手机号">
                  {{ data[0].phone }}
                </el-descriptions-item>
                <el-descriptions-item label="积分">
                  {{ data[0].integral }}
                </el-descriptions-item>
                <el-descriptions-item label="说明">
                  {{ data[0].changeReason }}
                </el-descriptions-item>
                <el-descriptions-item label="备注">
                  {{ data[0].remark }}
                </el-descriptions-item>
                <el-descriptions-item label="审批单号">
                  {{ data[0].flowCode }}
                </el-descriptions-item>
                <el-descriptions-item label="审批状态">
                  {{ data[0].flowStatusName }}
                </el-descriptions-item>
              </el-descriptions>
            </div>
          </div>
        </div>
      </el-main>
      <el-footer>
        <el-button @click="approvalPass" v-show="data[0].flowStatus == '1007002'" type="primary"
          v-if="isApproval">审批通过</el-button>
        <el-button @click="approvalRefusal" v-show="data[0].flowStatus == '1007002'" type="primary"
          v-if="isApproval">审批驳回</el-button>
        <el-button @click="back">关闭</el-button>
      </el-footer>
    </el-container>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import $ from "@util/base";
import { $msg, $box } from "@/common/ui/msg";
import BackTitleView from "@com/BackTitleView.vue";
import useRoute from "@util/router";
import api from "@api/points";

const route = useRoute();
const urlQuery = route.query();

route.watchRouter("pointsdetails", () => { getData() })

var isApproval = false;

$.handleCRU(urlQuery.type, {
  show: () => {
    getData();
  },
  examine: () => {
    isApproval = true;
    getData();
  },
});

const data = ref([{}]);
const total = ref(0);

const config = {
  showIndex: true,
  column: [
    {
      label: "用户手机号",
      prop: "phone",
    },
    {
      label: "积分",
      prop: "integral",
    },
    {
      label: "说明",
      prop: "changeReason",
    },
    {
      label: "备注",
      prop: "remark",
    },
  ],
};

function getData() {
  let routeQuery = route.query();
  api.details(routeQuery.code, routeQuery.batch, routeQuery.p, routeQuery.s, (val) => {
    total.value = val.itemList.length;
    data.value = val.itemList.map((e) => {
      if (e.integral > 0) {
        e.integral = `+${e.integral}`;
      }
      return e;
    });
  });
}

// 审批通过
function approvalPass() {
  $box.open("通过", "确认该积分审批通过", () => {
    api.approval(data.value[0].flowCode, "1007004", "", () => {
      $msg.succ("审批成功");
      route.go(-1);
    });
  });
}

// 驳回
function approvalRefusal() {
  console.log(data.value);
  $box.input("确认驳回", "驳回原因", null, (val) => {
    api.approval(data.value[0].flowCode, "1007003", val, () => {
      $msg.succ("驳回成功");
      route.go(-1);
    });
  });
}

function back() {
  route.go(-1);
}
</script>

<style lang="scss">
.deposit_details {
  height: 100%;

  .base_details_content_second {
    margin-top: 40px;
  }
}
</style>
